import React, { Component, PureComponent } from 'react';
import { Icon, Avatar, List } from 'antd';
// import { map, isEmpty } from 'lodash';
import styles from './index.less';
import { byte2KOM } from '/common/utils/numberUtils';
import { isImgByExt } from '/common/utils/imageUtils';
import PhotoSwiper from '/common/components/PhotoSwiper';
import { findIndex, isEmpty, unionBy } from 'lodash';

export default class FilePreviewComp extends PureComponent {

  constructor(props) {
    super(props);
    this.state = {
      list: props.compData,
      isShowPS: false,
      curFile: {},
    };
  }

  componentDidMount() {
    this.props.onRef && (this.props.onRef(this));
  }

  onDelete = (payload) => {
    let list = this.state.list.filter(item => item.saveName !== payload.saveName);
    this.setState({ list });
  };

  // 添加文件，此方法可供外部组件直接调用
  addPreviewFiles(files) {
    console.log('previewRef', unionBy(this.state.list, files, 'saveName'));
    if (!isEmpty(files)) {
      this.setState({ list: unionBy(this.state.list, files, 'saveName') });
    }
  }

  //获取关联附件
  getPreviewFile() {
    return this.state.list;
  }

  onClickFile(item, e) {
    e.stopPropagation();

    if (item.path) {

      if (isImgByExt(item.ext)) {
        this.setState({ isShowPS: true, curFile: item });
      } else {
        window.open(item.path, '_blank');
      }
    }
  }

  dealImgs() {

    if (isEmpty(this.state.list)) return [];

    return this.state.list
      .filter(v => (v && v.path && isImgByExt(v.ext)))
      .map(v => ({
        uid: v.saveName,
        name: v.name,
        src: v.path,
      }));
  }

  render() {
    const { style } = this.props;
    const { list, curFile } = this.state;

    const photoList = this.dealImgs();
    const curPhotoInd = curFile && curFile.saveName ? findIndex(photoList, (v, k) => (v && v.uid === curFile.saveName)) : 0;

    return (
      <>
        <div className={styles.previewContainer} style={style || {}}>
          <List
            dataSource={list}
            renderItem={item => {
              const name = item.name ? item.name : '';
              const path = item.path ? item.path : '';
              return (
                <List.Item className={`no-click ${styles.itemPreview}`} actions={this.props.onlyPreview ? [] : [
                  <a href="javascript:;" className={styles.deleteBtn} onClick={e => this.onDelete(item)}>
                    <Icon type="close"/>
                  </a>,
                ]}>
                  <List.Item.Meta
                    avatar={
                      (path && isImgByExt(item.ext)) ?
                        <Avatar onClick={this.onClickFile.bind(this, item)} shape={'square'} size={'large'} src={path}
                                alt={'图片'}/> :
                        <Avatar shape={'square'} size={'large'} icon={'file'}/>
                    }
                    title={<a href="javascript:;" onClick={this.onClickFile.bind(this, item)}>{name}</a>}
                    description={byte2KOM(item.size)}
                  />
                </List.Item>
              );
            }}
          />
          {
            // (!isEmpty(list) && list) ? map(list, (item, key) => {
            //   return (
            //     <PreviewItem key={key}
            //                  onlyPreview={this.props.onlyPreview}
            //                  compData={item}
            //                  onDelete={this.onDelete.bind(this)}/>
            //   );
            // }) : <Empty image={Empty.PRESENTED_IMAGE_SIMPLE} style={{ padding: '50px 0' }}/>
          }
        </div>
        {
          this.state.isShowPS && (
            <PhotoSwiper
              visible={this.state.isShowPS}
              onClose={() => {
                this.setState({ isShowPS: false });
              }}
              curInd={curPhotoInd}
              photoList={photoList}
            />
          )
        }
      </>
    );
  }
}
FilePreviewComp.defaultProps = {
  style: {},
  compData: [
    // {
    //     path:'path....',
    //     name:'凭证A',
    //     dir:'所有文件',
    //     size:'120MB',
    //     id:1,
    // },{
    //     path:'path....',
    //     name:'凭证B',
    //     dir:'所有文件',
    //     size:'120MB',
    //     id:2
    // },{
    //       originId:’‘,
    //       name: v.fileName,
    //       ext: v.extension,
    //       saveName: v.saveName, 用此字段唯一标识一个文档数据
    //       path: v.savePath,
    //       size: v.size,
    //       id: v.refFileId, 没有值
    //     }
  ],
};

//
// class PreviewItem extends PureComponent {
//   render() {
//     const { compData } = this.props;
//     const name = compData.name ? compData.name : '';
//     const path = compData.path ? compData.path : '';
//     return (
//       <>
//         <List.Item.Meta
//           avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png"/>}
//           title={<a href="javascript:;">{item.title}</a>}
//           description="Ant Design, a design language for background applications, is refined by Ant UED Team"
//         />
//         {/*<Row className={styles.itemPreview}>*/}
//         {/*  <Col span={20} className={styles.itemContent}>*/}
//         {/*    <Row>*/}
//         {/*      <Col span={2}>*/}
//         {/*        <Avatar shape="square" size="large" src={`${compData.path ? compData.path : ''}`}/>*/}
//         {/*      </Col>*/}
//         {/*      <Col span={22}>*/}
//         {/*        <div className={styles.itemPath}>*/}
//         {/*          <p><a href="javascript:;">{`${compData.name ? compData.name : ''}(${byte2KOM(compData.size)})`}</a>*/}
//         {/*          </p>*/}
//         {/*          <p>{compData.dir}</p>*/}
//         {/*        </div>*/}
//         {/*      </Col>*/}
//         {/*    </Row>*/}
//         {/*  </Col>*/}
//         {/*  {*/}
//         {/*    this.props.onlyPreview == false &&*/}
//         {/*    <Col span={4} className={styles.itemOper}>*/}
//         <a href="javascript:;" onClick={e => this.props.onDelete(compData)} className={styles.deleteBtn}>
//           <Icon type="delete"/>
//         </a>
//         {/*    </Col>*/}
//         {/*  }*/}
//
//         {/*</Row>*/}
//       </>
//     );
//   }
// }
